<template>
  <a-space>
    <a-time-picker
      placeholder="开始时间"
      :format="format"
      v-model="myValue[0]"
      @change="onChangeStart"
    />
    ~
    <a-time-picker
      placeholder="结束时间"
      :format="format"
      v-model="myValue[1]"
      @change="onChangeEnd"
    />
  </a-space>
</template>
<script>
import moment from 'moment'
export default {
  name: 'TimeRangePicker',
  data () {
    return {
      myValue: [],
      myValueStrArr: []
    }
  },
  components: {

  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
        type: Array
    },
    format: {
      type: String,
      default () {
        return 'HH:mm:ss'
      }
    }
  },
  watch: {
    value (newVal) {
      // moment对象数组值
      this.myValue[0] = !newVal[0] ? null : moment(newVal[0], this.format)
      this.myValue[1] = !newVal[1] ? null : moment(newVal[1], this.format)
      // 字符串对象数组值
      this.myValueStrArr = newVal
    }
  },
  methods: {
    moment,
    onChangeStart (value, dateString) {
      this.myValueStrArr[0] = dateString
      this.$emit('change', this.myValueStrArr)
    },
    onChangeEnd (value, dateString) {
      this.myValueStrArr[1] = dateString
      this.$emit('change', this.myValueStrArr)
    }
  }
}
</script>
